import React, { Component } from 'react'
import Son from './Son'

// 跨级组件通信:
// 步骤1:引入createContext方法从react, 使用该方法创建contextObj对象,抽离成公共的
// 步骤2:在祖先组件中引入 contextObj,并解构出 Provider组件, 然后该组件有value属性, value组件的值就是共享的数据
// 步骤3: 用Provider组件包裹后代组件
// 步骤4: 在后代组件中引入contextObj,并解构出 Consumer组件,然后在Consumer组件中消费数据

// 引入contextObj 对象
import contextObj from './context'
// console.log('contextObj', contextObj);
const { Provider } = contextObj
export default class Father extends Component {
    state = {
        familybao: {
            name: '元青花',
            age: 800
        }
    }
    render() {
        return (
            <div>
                <Provider value={this.state.familybao}>
                    <Son></Son>
                </Provider>
                <p onClick={() => {
                    this.setState((state) => {
                        state.familybao.age++
                        return state
                    })
                }}>age++</p>
            </div>
        )
    }
}
